<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import SiderMenu from './components/SiderMenu.vue';
const route = useRoute();
const router = useRouter();
const collapsed = ref<boolean>(false);
//
const selectedKeys = ref<string[]>([route.path]);
const rootSubmenuKeys = ref<string[]>([]);
const openKeys = ref<string[]>([]);
//
const menus = router.options.routes as any;
const currentKey = ref<string[]>([]);
onMounted(() => {
  init();
  console.log('route', route.matched);
});

const init = () => {
  if (menus && menus.length > 0) {
    rootSubmenuKeys.value = menus
      .map((item: {name: string | number}) => item.name)
      .filter((item: any) => item.name != 'nome');
  }
  openKeys.value = route.matched.slice(0, -1).map((item) => item.name) as any; // 截取数组最后一位（不会修改原数组）
  console.log(
    '截取数组最后一位（不会修改原数组）',
    route.matched.slice(0, -1).map((item) => item.name),
  );
  console.log('菜单', menus);
};

const handleNavigation = ({item, key, keyPath}: any) => {
  console.log('item', item);
  console.log('key', key);
  console.log('keyPath', keyPath);
  router.push({
    path: key,
  });
  openKeys.value = keyPath.slice(0, -1);
};
// 控制subMenu 打开关闭
const onOpenChange = (itemOpenKeys: any[]) => {
  let routeMatched = route.matched.slice(0, -1).map((item) => item.name) as any;
  console.log('routeMatched', routeMatched);
  const latestOpenKey: any = itemOpenKeys.find((key) => openKeys.value.indexOf(key) === -1);
  // console.log('查找', latestOpenKey);
  // console.log('路由', route);
  if (rootSubmenuKeys.value.indexOf(latestOpenKey) === -1) {
    console.log('二次进入itemOpenKeys', itemOpenKeys);
    const CC: any = routeMatched.find((key: any) => itemOpenKeys.indexOf(key) === -1);
    console.log('二次进入itemOpenKeys[0]', itemOpenKeys[0]);
    console.log('二次进入itemOpenKeys最后', itemOpenKeys[itemOpenKeys.length - 1]);
    // openKeys.value = itemOpenKeys;
    if (itemOpenKeys.length <= 1) {
      console.log('111', itemOpenKeys);
      openKeys.value = itemOpenKeys;
      currentKey.value = itemOpenKeys;
      return;
    }
    currentKey.value = [itemOpenKeys[itemOpenKeys.length - 1]];
    openKeys.value = [itemOpenKeys[0], itemOpenKeys[itemOpenKeys.length - 1]];
  } else {
    console.log('首次进入itemOpenKeys', latestOpenKey);
    const check = routeMatched.find((item: any) => item === latestOpenKey);
    console.log('check', check);
    console.log('checkRouteMatched', routeMatched);
    if (check) {
      openKeys.value = routeMatched;
    } else {
      if (currentKey.value.length > 0) {
        openKeys.value = latestOpenKey ? [latestOpenKey, currentKey.value[0]] : [];
      } else {
        openKeys.value = latestOpenKey ? [latestOpenKey] : [];
      }
    }
  }
};
</script>

<template>
  <a-layout class="main-layout-container">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu
        v-model:selectedKeys="selectedKeys"
        :open-keys="openKeys"
        theme="dark"
        mode="inline"
        @open-change="onOpenChange"
        @click="handleNavigation"
      >
        <SiderMenu :menus="menus" />
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding: 0; background: #fff" />
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{padding: '24px', background: '#fff', minHeight: '360px'}">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center"> Ant Design ©2018 Created by Ant UED </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style lang="less" scoped>
.main-layout-container {
  min-height: 100vh;
  .logo {
    margin: 16px;
    height: 32px;
    background: rgb(255 255 255 / 30%);
  }
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
: any[]: string
